import React, { useEffect, useState } from 'react';
import './index.scss';
import MyButton from '../MyButton';
import http from '../../utils/http';
import api from '../../api';
import { message } from 'antd';
import { formateRealDate } from '../../utils';


interface User {
    user_id: string;
    username: string;
    email: string;
    avatar_id?: string;
    avatar_url?: string;
    bio: string;
    status: 'online' | 'idle' | 'dnd' | 'offline';
    currentActivity?: string;
    created_at: string;
    friendCount: number;
    serverCount: number;
    tags: string;
    // messageCount: number;
}

interface UserInfoDlgProps {
    user_id: string;
    visible: boolean;
    onClose: () => void;
}

const UserInfoDlg: React.FC<UserInfoDlgProps> = ({ user_id, visible, onClose }) => {
    if (!visible) return null;

    const [messageApi, contextHolder] = message.useMessage()

    const [user, setUser] = useState<User>({
        user_id: 'string',
        username: 'string',
        email: 'string',
        bio: 'string',
        status: 'online',
        currentActivity: 'string',
        created_at: 'string',
        friendCount: 1,
        serverCount: 2,
        tags: JSON.stringify(['string']),
    });

    const getStatusLabel = (status: User['status']) => {
        switch (status) {
            case 'online': return '在线';
            case 'idle': return '离开';
            case 'dnd': return '请勿打扰';
            case 'offline': return '离线';
            default: return '';
        }
    };

    async function getPersonalInfo(){
        http.post(api.auth.getPersonalInfo,{user_id:user_id}).then(res=>{
            setUser(res.data)
        }).catch(err=>{
            messageApi.error(err.message)
        })
    }

    function handleAddFriend(){
        http.post(api.friend.addFriend,{friend_id:user.user_id}).then(()=>{
            messageApi.success('已发送好友申请')
        }).catch(err=>{
            messageApi.error(err.message)
        })
    }

    useEffect(()=>{
        getPersonalInfo()
    },[])

    return (
        <>
            {contextHolder}
            <div className="userInfoDlg_user_info-modal" onClick={onClose}>
                <div className="userInfoDlg_modal_content" onClick={e => e.stopPropagation()}>
                    <div className='userInfoDlg_modal_content_main'>
                        <div className="userInfoDlg_modal_header">
                            <button title='关闭' className="userInfoDlg_modal_close" onClick={onClose}>
                                <i className="fas fa-times"></i>
                            </button>
                            
                            <div className="userInfoDlg_modal_avatar">
                                {user.avatar_url ? (
                                    <img loading='lazy' src={user.avatar_url} alt={user.username} />
                                    ) : (
                                    <div className="userInfoDlg_avatar_placeholder">{user.username.charAt(0).toUpperCase()}</div>
                                )}
                            </div>
                            
                            <h2 className="userInfoDlg_modal_username">{user.username}</h2>
                            
                            <div className={`userInfoDlg_modal_status status-${user.status}`}>
                                {getStatusLabel(user.status)}
                                {user.currentActivity && ` · ${user.currentActivity}`}
                            </div>
                        </div>
                            
                        <div className="userInfoDlg_modal_body">
                            <div className="userInfoDlg_info_item">
                                <div className="userInfoDlg_info_label">账号 ID</div>
                                <div className="userInfoDlg_info_value">@{user.user_id}</div>
                            </div>
                            
                            <div className="userInfoDlg_info_item">
                                <div className="userInfoDlg_info_label">邮箱</div>
                                <div className="userInfoDlg_info_value">{user.email}</div>
                            </div>
                            
                            <div className="userInfoDlg_info_item">
                                <div className="userInfoDlg_info_label">注册日期</div>
                                <div className="userInfoDlg_info_value">{formateRealDate(user.created_at)}</div>
                            </div>
                            
                            <div className="userInfoDlg_info_item">
                                <div className="userInfoDlg_info_label">状态</div>
                                <div className="userInfoDlg_info_value">
                                {getStatusLabel(user.status)}
                                {user.currentActivity && ` (${user.currentActivity})`}
                                </div>
                            </div>
                            
                            {user.bio && (
                                <div className="userInfoDlg_modal_bio">
                                <p>{user.bio}</p>
                                </div>
                            )}
                            
                        </div>
                    </div>
                    <div className="userInfoDlg_modal_actions">
                        <MyButton type='guest'>
                            发送消息
                        </MyButton>
                        <MyButton type='guest' onClick={handleAddFriend}>
                            添加好友
                        </MyButton>
                    </div>
                </div>
            </div>
        </>
    );
};

export default UserInfoDlg;